<template>
	<om-page :title="pageTitle">
		<view class="page__bd">
			<uni-list>
				<view v-for="(item, index) in commonData.datas" :key="index" class="item">
					<uni-list-item @click="infoTab(item)" :extraText="item.pay">
						<view class="flex">
							<view>{{item.date}}</view>
							<om-dot :showDot="item.canConfirm" />
						</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from '../../../static/js/listLoad.js';
	const app = getApp()
	export default {
		data() {
			return {
				scrollTop: 0,
				commonData: {},
				pageTitle: ""
			};
		},
		methods: {
			getPageInfo(show, title, params) {
				uni.setStorage({
					key: 'info',
					data: show,
				})
				var url = './salarybill-cache-info?cacheKey=info&title=' + title + '&salaryBillYear=' + params[0] +
					'&salaryBillMonth=' + params[1] + '&id=' + params[2]
				uni.navigateTo({
					url: url
				})
			},
			infoTab(item) {
				let arr = item.date.split("-")
				arr.push(item.id)
				this.getPageInfo(item.show, '薪资详情', arr);
			}
		},
		onLoad(options) {
			let _that = this
			this.pageTitle = options.title || "我的薪资"
			uni.setNavigationBarTitle({
				title: this.pageTitle
			})
		},
		onShow() {
			listLoad.initData(this, 'wxSalaryBill/getBillList')
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			listLoad.reachBottom(this)
		}
	};
</script>

<style scoped>
	.item {
		position: relative;
	}

	.itemDot {
		height: 10px;
		width: 10px;
		background-color: #DD524D;
		position: absolute;
		left: 2px;
		top: 36%;
		border-radius: 5px;
	}
</style>